<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <!--    左侧导航-->
    <el-aside width="10vw" >
      <!--      左侧头部-->
      <el-header
        style="background-color: rgb(238, 241, 246);border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
        <span >配置页面</span>
      </el-header>

      <el-menu
        :default-active="this.$route.path"
        router
        class="el-menu-vertical-demo"
        style="background-color: rgb(238, 241, 246)">
        <el-menu-item index="/config/ybtjConfig">
          <template slot="title">
            <i class="el-icon-pie-chart"></i>
            样本统计
          </template>
        </el-menu-item>

        <el-menu-item index="/config/lsxtjConfig">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            流水线统计
          </template>
        </el-menu-item>

        <el-menu-item index="/config/sjjgConfig">
          <template slot="title">
            <i class="el-icon-warning-outline"></i>
            试剂警告
          </template>
        </el-menu-item>

        <el-menu-item index="/config/tsConfig">
          <template slot="title">
            <i class="el-icon-circle-close"></i>
            仪器故障
          </template>
        </el-menu-item>

        <el-menu-item index="/config/tsConfig">
          <template slot="title">
            <i class="el-icon-message-solid"></i>
            异常提示
          </template>
        </el-menu-item>

        <el-menu-item index="/config/tsConfig">
          <template slot="title">
            <i class="el-icon-warning"></i>
            危急值
          </template>
        </el-menu-item>

        <el-menu-item index="/config/sbfzConfig">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            设备负载
          </template>
        </el-menu-item>

        <el-menu-item index="/config/yxhjConfig">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            运行环境
          </template>
        </el-menu-item>

      </el-menu>
    </el-aside>
    <!--右侧-->
    <el-container>
      <!--右侧顶部-->
      <el-header style="text-align: right; font-size: 12px; width:89.8vw; margin-left:0vw">

      </el-header>
      <!--右侧内容-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "ConfigPage",
  provide () {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      input: '',
      isRouterAlive: true
      // isCollapse: true
    }
  },
  mounted () {

  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }

};

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 9.9vw;
  min-height: 400px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}


/*@keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%,0 , 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}*/

</style>
